<template>
  <transition name="dialog-fade">
    <el-dialog
      :title="dialogTitle"
      class="dialog-addguide"
      :visible.sync="guideDialog"
      width="50%"
      append-to-body
      @close="closeDialog()"
    >
      <el-form
        ref="formInfo"
        :model="formInfo"
        class="demo-form-inline"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="formInfo.title" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <quill-editor
            ref="text"
            v-model="formInfo.content"
            class="myQuillEditor"
            :options="editorOption"
          />
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input v-model="formInfo.sort"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="guideDialog=false">取消</el-button>
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </transition>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { helpAdd } from "@/api/user";
import Base64 from "@/utils/base";

export default {
  name: "DialogAddguide",
  inject:["reload"],
  components: {
    quillEditor
  },
  props: {
    dialogTitle: {
      type: String,
      default: ""
    },
    itemInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "change" }],
        // sort: [{ required: true, message: "请输入序号", trigger: "change" }],
        content: [{ required: true, message: "请输入内容", trigger: "change" }]
      },
      guideDialog: false,
      formInfo: {
        title: "",
        sort: "",
        content: ""
      }
    };
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          let parmes = {
            title: that.formInfo.title,
            content: that.formInfo.content,
            sort: that.formInfo.sort
          };
          helpAdd({
            request_data: Base64.encode(JSON.stringify(parmes))
          }).then(res => {
             if(res.status==2){
          that.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
            that.closeDialog();
            that.reload()
          });
          // 走保存请求
        } else {
          return false;
        }
      });
    },
    // 关闭弹框
    closeDialog(flag) {
      this.$refs["formInfo"].resetFields();
      this.guideDialog = false;
      this.$emit("closeDialog", flag);
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-fade-enter-active {
  -webkit-animation: dialog-fade-in 0.3s;
  animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
  -webkit-animation: dialog-fade-out 0.3s;
  animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
@keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
// .myQuillEditor {
//   height: 300px;
//   width: 98%;
// }
</style>
